import React, {useEffect, useRef} from 'react';

const BingDwenDwen = () => {
  const circleRef = useRef<HTMLCanvasElement>(null);

  function drawdwendwen(ctx: any) {
    //耳朵
    ctx.beginPath();
    ctx.fillStyle = '#000';
    ctx.arc(300, 190, 20, Math.PI, Math.PI * 2);
    ctx.fillRect(280, 190, 40, 40);
    ctx.arc(500, 190, 20, Math.PI, Math.PI * 2);
    ctx.fillRect(480, 190, 40, 40);
    ctx.fill();
    ctx.closePath();

    //身体
    ctx.beginPath();
    ctx.ellipse(400, 400, 150, 160, 0, 0, Math.PI);
    ctx.ellipse(400, 310, 160, 150, 0, Math.PI, Math.PI * 2);
    ctx.fillStyle = '#fff';
    ctx.fill();
    ctx.closePath();

    //   脚
    ctx.beginPath();
    ctx.moveTo(300, 523);
    ctx.bezierCurveTo(315, 523, 290, 583, 300, 603);
    ctx.quadraticCurveTo(325, 613, 370, 603);
    ctx.quadraticCurveTo(360, 584, 370, 556);
    ctx.quadraticCurveTo(325, 523, 300, 520);
    ctx.stroke();
    ctx.fillStyle = '#000';
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    ctx.moveTo(440, 554);
    ctx.quadraticCurveTo(445, 575, 438, 600);
    ctx.quadraticCurveTo(465, 610, 510, 600);
    ctx.bezierCurveTo(495, 575, 515, 545, 505, 514);
    ctx.quadraticCurveTo(470, 546, 440, 553);
    ctx.fillStyle = '#000';
    ctx.fill();
    ctx.closePath();

    // 手
    // 左手
    ctx.beginPath();
    ctx.moveTo(250, 400);
    ctx.quadraticCurveTo(245, 330, 241, 300);
    ctx.quadraticCurveTo(200, 320, 160, 420);
    ctx.lineTo(230, 420);
    ctx.quadraticCurveTo(245, 400, 250, 400);
    ctx.fillStyle = '#000';
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(195, 420, 35, 0, Math.PI);
    ctx.fillStyle = '#000';
    ctx.fill();
    ctx.closePath();

    // 右手
    ctx.beginPath();
    ctx.moveTo(559, 300);
    ctx.quadraticCurveTo(575, 295, 600, 250);
    ctx.quadraticCurveTo(625, 230, 655, 250);
    ctx.quadraticCurveTo(680, 330, 550, 400);
    ctx.quadraticCurveTo(556, 340, 559, 300);
    ctx.fillStyle = '#000';
    ctx.fill();
    ctx.closePath();

    // 爱心
    let get_arr = function (a: number, len: number) {
      let arr = [];
      for (let i = 0; i < len; i++) {
        let step = (i / len) * (Math.PI * 2); //递增的θ
        let vector = {
          x: a * (16 * Math.pow(Math.sin(step), 3)) + 625,
          y:
            -a *
              (13 * Math.cos(step) -
                5 * Math.cos(2 * step) -
                2 * Math.cos(3 * step) -
                Math.cos(4 * step)) +
            275
        };
        arr.push(vector);
      }
      return arr;
    };
    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 1;
    let len = 50;
    let arr = get_arr(1, 50);
    for (let i = 0; i < len; i++) {
      ctx.lineTo(arr[i].x, arr[i].y); //心形的点一一被描绘出来
    }
    ctx.fillStyle = '#f00';
    ctx.fill();
    ctx.closePath();

    // logo
    var img = new Image();
    img.onload = () => {
      ctx.drawImage(img, 0, 0, 1000, 1000, 350, 440, 100, 100);
    };
    img.src =
      'https://tse1-mm.cn.bing.net/th/id/R-C.875cf5196133a48b053609fd93e043fe?rik=BLpfQWCOiNm9zA&riu=http%3a%2f%2fimg.manfen5.com%2fres%2fGZYW%2fweb%2fSTSource%2f2017021806015862543655%2fSYS201702180601599865816961_ST%2fSYS201702180601599865816961_ST.001.jpeg&ehk=N4zRZomZLDt15%2fdvyMQbyTvVTG325%2b%2fCH8giB%2fEK7uA%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1';

    // 彩虹🌈圈
    ctx.beginPath();
    ctx.ellipse(400, 300, 125, 95, -0.06, 0, Math.PI * 2);
    var grd = ctx.createRadialGradient(400, 300, 95, 400, 300, 130);
    grd.addColorStop(0, '#dddddd20');
    grd.addColorStop(1, '#0000FF');
    ctx.strokeStyle = grd;
    ctx.lineWidth = 6;
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.ellipse(400, 300, 130, 95, -0.12, 0, Math.PI * 2);
    var grd = ctx.createRadialGradient(400, 300, 95, 400, 300, 130);
    grd.addColorStop(0, '#dddddd20');
    grd.addColorStop(1, '#00FFFF66');
    ctx.strokeStyle = grd;
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.ellipse(400, 300, 130, 95, 0.06, 0, Math.PI * 2);
    var grd = ctx.createRadialGradient(400, 300, 95, 400, 300, 130);
    grd.addColorStop(0, '#dddddd20');
    grd.addColorStop(1, '#FFFF0066');
    ctx.strokeStyle = grd;
    ctx.lineWidth = 3;
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.ellipse(400, 300, 130, 95, 0, 0, Math.PI * 2);
    var grd = ctx.createRadialGradient(400, 300, 95, 400, 300, 130);
    grd.addColorStop(0, '#dddddd20');
    grd.addColorStop(1, '#00FF0066');
    ctx.strokeStyle = grd;
    ctx.lineWidth = 3;
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.ellipse(400, 300, 130, 95, 0.1, 0, Math.PI * 2);
    var grd = ctx.createRadialGradient(400, 300, 95, 400, 300, 130);
    grd.addColorStop(0, '#dddddd20');
    grd.addColorStop(1, '#8B00FF66');
    ctx.strokeStyle = grd;
    ctx.lineWidth = 4;
    ctx.stroke();
    ctx.closePath();

    // 眼
    ctx.beginPath();
    ctx.ellipse(465, 275, 38, 26, 1, 0, Math.PI * 2);
    ctx.ellipse(335, 275, 43, 29, -0.8, 0, Math.PI * 2);
    ctx.fillStyle = '#000';
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(344, 272, 22, 0, Math.PI * 2);
    ctx.arc(458, 270, 20, 0, Math.PI * 2);
    ctx.fillStyle = '#fff';
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(344, 272, 17, 0, Math.PI * 2);
    ctx.arc(458, 270, 15, 0, Math.PI * 2);
    ctx.fillStyle = '#000';
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(344, 272, 16, 0, Math.PI * 2);
    var grd = ctx.createRadialGradient(344, 272, 0, 344, 272, 20);
    grd.addColorStop(0, '#444');
    grd.addColorStop(1, '#111');
    ctx.fillStyle = grd;
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(458, 270, 14, 0, Math.PI * 2);
    var grd = ctx.createRadialGradient(458, 270, 0, 458, 270, 20);
    grd.addColorStop(0, '#444');
    grd.addColorStop(1, '#111');
    ctx.fillStyle = grd;
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(344, 272, 12, 0, Math.PI * 2);
    ctx.arc(458, 270, 10, 0, Math.PI * 2);
    ctx.fillStyle = '#000';
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(350, 266, 4, 0, Math.PI * 2);
    ctx.arc(452, 266, 3, 0, Math.PI * 2);
    ctx.fillStyle = '#fff';
    ctx.fill();
    ctx.closePath();
    // 鼻子
    ctx.beginPath();
    ctx.moveTo(380, 280);
    ctx.lineTo(420, 280);
    ctx.lineTo(400, 295);
    ctx.lineTo(380, 280);
    ctx.fillStyle = '#000';
    ctx.fill();
    ctx.closePath();
    // 嘴
    ctx.beginPath();
    ctx.moveTo(370, 323);
    ctx.lineTo(400, 335);
    ctx.lineTo(430, 323);
    ctx.quadraticCurveTo(400, 330, 370, 323);
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 2;
    ctx.fillStyle = '#f00';
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
  }

  function draw() {
    //获取画布
    const canvas = circleRef.current as HTMLCanvasElement;
    const ctx: CanvasRenderingContext2D = canvas.getContext('2d')!;
    //清除画布
    // ctx.clearRect(0, 0, canvas.width, canvas.height);
    console.log(111);
    drawdwendwen(ctx);
  }

  useEffect(() => {
    draw();
  }, []);
  return (
    <div>
      <canvas width={1000} height={800} ref={circleRef}></canvas>
    </div>
  );
};

export default BingDwenDwen;
